<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            td input {
                background: none;
                outline: none;
                border: none;
                width: 100px;
            }
            .delete {
                cursor: pointer;
            }
            input[type="number"]::-webkit-inner-spin-button,
            input[type="number"]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        </style>
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
        <script src="./bootstrap/js/bootstrap.min.js"></script>
        <script src="./js/jQuery.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#">导航！</a>
                <button
                    class="navbar-toggler d-lg-none"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapsibleNavId"
                    aria-controls="collapsibleNavId"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <ul class="navbar-nav me-auto mt-2 mt-lg-0">
                        <li class="nav-item">
                            <a
                                class="nav-link active"
                                href="./index.html"
                                aria-current="page"
                                >Home</a
                            >
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="./GPA_v1.html"
                                >GPA</a
                            >
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./notes.html">Note</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./todoList.html">Todo</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./test.html">Test</a>
                        </li>
                        <!-- <li class="nav-item dropdown">
                            <a
                                class="nav-link dropdown-toggle"
                                href="#"
                                id="dropdownId"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                                >Dropdown</a
                            >
                            <div
                                class="dropdown-menu"
                                aria-labelledby="dropdownId"
                            >
                                <a class="dropdown-item" href="#"
                                    >Action 1</a
                                >
                                <a class="dropdown-item" href="#"
                                    >Action 2</a
                                >
                            </div>
                        </li> -->
                    </ul>
                    <form class="d-flex my-2 my-lg-0">
                        <input
                            class="form-control me-sm-2"
                            type="text"
                            placeholder="没什么用"
                        />
                        <button
                            class="btn btn-outline-success my-2 my-sm-0"
                            type="submit"
                        >
                            Search
                        </button>
                    </form>
                </div>
            </div>
        </nav>
        <br />
        <div class="container">
            <div class="row">
                <div class="col-2"></div>
                <div class="col-8">
                    <h1 class="text-center mt-4">天津大学绩点计算器</h1>

                    <table class="mainSheet text-center fs-3 table">
                        <thead>
                            <tr>
                                <th scope="col">学分</th>
                                <th scope="col">成绩</th>
                                <th scope="col">绩点</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <td>
                                    <input
                                        type="text"
                                        name=""
                                        id="credit"
                                        class="text-center col-sm"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="text"
                                        name=""
                                        id="grade"
                                        class="text-center col-sm"
                                    />
                                </td>
                                <td class="gpa text-center"></td>
                                <td
                                    class="delete text-danger"
                                >
                                    删除
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>总学分</th>
                                <th>总加权</th>
                                <th>绩点</th>
                            </tr>
                            <tr class="result text-center">
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>

                    <div class="justify-content-center">
                        <div class="btns btn-group mx-auto">
                            <input
                                type="button"
                                value="计算"
                                class="calc btn btn-primary fs-3"
                            />
                            <input
                                type="button"
                                value="加一行"
                                class="addRow btn btn-primary fs-3"
                            />
                        </div>
                    </div>
                    <table class="resultTable col-6 table text-center"></table>
                </div>
                <div class="col-2">
                    <span class="form-check form-switch mt-4 ms-5">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="autoComplt"
                        />
                        <label class="form-check-label" for="autoComplt"
                            >自动保存</label
                        >
                    </span>
                </div>
            </div>
        </div>

        <script>
            let calcBtn = document.querySelector(".calc");
            let addBtn = document.querySelector(".addRow");
            let tbody = document.querySelector("tbody");
            let result = document.querySelector(".result");
            let firstRow = tbody.children[0].cloneNode(1);

            let autoComplt = document.querySelector("#autoComplt");
            let data;

            function gpaCalc(grade) {
                let result;
                if (grade >= 90) {
                    result = 4.0;
                } else if (grade >= 85) {
                    result = 3.7;
                } else if (grade >= 82) {
                    result = 3.3;
                } else if (grade >= 78) {
                    result = 3.0;
                } else if (grade >= 75) {
                    result = 2.7;
                } else if (grade >= 72) {
                    result = 2.3;
                } else if (grade >= 68) {
                    result = 2.0;
                } else if (grade >= 64) {
                    result = 1.5;
                } else if (grade >= 60) {
                    result = 1.0;
                } else {
                    result = 0.0;
                }
                return result;
            }
                $("table.mainSheet tbody tr:odd").addClass("table-primary");
                $("table.mainSheet tbody tr:even").removeClass("table-primary");

            addBtn.addEventListener("click", function () {
                cloneRow = firstRow.cloneNode(1);
                cloneRow.children[3].addEventListener("click", function () {
                    tbody.removeChild(this.parentNode);
                    $("table.mainSheet tbody tr:odd").addClass("table-primary");
                    // $("table.mainSheet tbody tr:even").css(
                    //     "background-color",
                    //     "white"
                    // );
                });
                tbody.append(cloneRow);
                $("table.mainSheet tbody tr:odd").addClass("table-primary");
                $("table.mainSheet tbody tr:even").removeClass("table-primary");
            });

            // 计算单行绩点
            // 按tju计算方法

            tbody.addEventListener("keyup", function (e) {
                let grade = parseInt(
                    e.target.parentNode.parentNode.children[1].children[0].value
                );
                let gpa = e.target.parentNode.parentNode.children[2];
                gpa.innerHTML = gpaCalc(grade);
            });

            // 计算加权按钮
            calcBtn.addEventListener("click", function () {
                let creditSum = 0;
                let gpaSum = 0;
                let gradeSum = 0;

                // 浏览器localstorage存储数据
                let grades = new Array();
                let credits = new Array();
                let gpas = new Array();

                for (let i = 0; i < tbody.children.length; i++) {
                    let grade = parseFloat(
                        tbody.children[i].children[1].children[0].value
                            ? tbody.children[i].children[1].children[0].value
                            : 0
                    );
                    // 存入grades数组
                    grade ? grades.push(grade) : false;

                    let credit = parseInt(
                        tbody.children[i].children[0].children[0].value
                            ? tbody.children[i].children[0].children[0].value
                            : 0
                    );
                    // 存入credits学分
                    credit ? credits.push(credit) : false;

                    let gpa = parseFloat(
                        tbody.children[i].querySelector(".gpa").innerHTML
                            ? tbody.children[i].querySelector(".gpa").innerHTML
                            : 0
                    );
                    // 计算加权
                    gradeSum += grade * credit;
                    creditSum += credit;
                    gpaSum += credit * gpa;
                    gpa ? gpas.push(gpa) : false;
                }
                result.children[0].innerHTML = creditSum ? creditSum : "不";
                result.children[1].innerHTML =
                    gradeSum / creditSum
                        ? (gradeSum / creditSum).toFixed(2)
                        : "知";
                result.children[2].innerHTML =
                    gpaSum / creditSum ? (gpaSum / creditSum).toFixed(2) : "道";

                data = {
                    grades: grades,
                    credits: credits,
                    gpas: gpas,
                };

                localStorage.setItem("GPAdata", JSON.stringify(data));
            });

            let restore = () => {
                let lastData = JSON.parse(localStorage.getItem("GPAdata"));
                for (let i = 0; i < lastData.grades.length; i++) {
                    addBtn.click();
                    tbody.children[i].children[0].children[0].value =
                        lastData.credits[i];
                    tbody.children[i].children[1].children[0].value =
                        lastData.grades[i];
                    tbody.children[i].children[2].innerHTML = lastData.gpas[i];
                }
                console.log(lastData);
                calcBtn.click();
            };
            // 设置第一个删除按钮
            let delBtn = document.querySelector(".delete");
            delBtn.addEventListener("click", function () {
                tbody.removeChild(this.parentNode);
            });

            autoComplt.addEventListener("click", () => {
                console.log(autoComplt.checked);
                localStorage.checked = autoComplt.checked;
            });

            window.onload = function () {
                if (localStorage.getItem("checked") === "true") {
                    autoComplt.checked = true;
                } else {
                    autoComplt.checked = false;
                };
                if (autoComplt.checked) {
                    restore();
                }
            };
        </script>
    </body>
</html>
